<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sprotty Random Graph Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/page.css">
    <!-- support Microsoft browsers -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dom4/3.0.0/dom4.js">
</head>
<body>
    <div class="container">
        <div class="row" id="sprotty-app" data-app="random-graph">
            <div class="col-md-10">
                <h1>Sprotty Random Graph Example</h1>
                <p>
                    <label for="direction">Layout Direction:</label>
                    <select id="direction" name="direction">
                        <option value="LEFT">Left</option>
                        <option value="DOWN">Down</option>
                        <option value="RIGHT">Right</option>
                        <option value="UP">Up</option>
                      </select>
                </p>
                <p>
                    <label for="nodeCount">Merge ports and show junction points:</label>
                    <input type="checkbox" id="junction" name="junction">
                </p>
            </div>
            <div class="help col-md-2">
                <a href="https://sprotty.org/docs/user-interaction/">Help</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="sprotty" class="sprotty"/>
            </div>
            <div class="copyright">
                &copy; 2023 <a href="https://www.typefox.io/">TypeFox GmbH</a>.
            </div>
        </div>
    </div>
<script src="../resources/bundle.js"></script>
</body>
</html>